irongit
Sign inRegister
huncholanehuncholane/dotbarPublic

Waybar configuration

dotbar/style/[Transparent] Crystal Clear.css
196 lines3.8 KBCSS
RawDownloadHistory
1/* ----------- 💫 https://github.com/JaKooLit 💫 -------- */
2/* .......Crystal Clear....................... */
3/* --- 👍 designed by https://github.com/Krautt 👍 --- */
4
5*{
6 font-family: "JetBrainsMono Nerd Font";
7 font-weight: bold;
8 min-height: 0;
9 /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
10 font-size: 97%;
11 font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
12}
13
14window#waybar {
15 background:transparent;
16 border-radius: 1px;
17 color: whitesmoke;
18}
19
20window#waybar.hidden {
21 opacity: 0.5;
22}
23
24window#waybar.empty
25window#waybar.empty #window {
26 padding: 0px;
27 border: 0px;
28 background-color: transparent;
29}
30
31#taskbar button,
32#workspaces button {
33 color: #6E6A86;
34 box-shadow: none;
35 text-shadow: none;
36 padding: 0px;
37 border-radius: 9px;
38 padding-left: 4px;
39 padding-right: 4px;
40 animation: gradient_f 20s ease-in infinite;
41 transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682);
42}
43
44#workspaces button.active {
45 color: whitesmoke;
46 border-radius: 15px 15px 15px 15px;
47 padding-left: 8px;
48 padding-right: 8px;
49 animation: gradient_f 20s ease-in infinite;
50 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
51}
52
53#workspaces button.focused {
54 color: #d8dee9;
55}
56
57#workspaces button.urgent {
58 color: #11111b;
59 border-radius: 10px;
60}
61
62#workspaces button:hover {
63 color: whitesmoke;
64 border-radius: 15px;
65 padding-left: 2px;
66 padding-right: 2px;
67 animation: gradient_f 20s ease-in infinite;
68 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
69}
70
71#backlight,
72#battery,
73#bluetooth,
74#clock,
75#cpu,
76#disk,
77#idle_inhibitor,
78#keyboard-state,
79#memory,
80#mode,
81#mpris,
82#network,
83#power-profiles-daemon,
84#pulseaudio,
85#taskbar,
86#temperature,
87#tray,
88#window,
89#wireplumber,
90#workspaces,
91#custom-backlight,
92#custom-browser,
93#custom-cava_mviz,
94#custom-cycle_wall,
95#custom-dot_update,
96#custom-file_manager,
97#custom-keybinds,
98#custom-keyboard,
99#custom-light_dark,
100#custom-lock,
101#custom-hint,
102#custom-hypridle,
103#custom-menu,
104#custom-playerctl,
105#custom-power_vertical,
106#custom-power,
107#custom-quit,
108#custom-reboot,
109#custom-settings,
110#custom-spotify,
111#custom-swaync,
112#custom-tty,
113#custom-updater,
114#custom-weather,
115#custom-weather.clearNight,
116#custom-weather.cloudyFoggyDay,
117#custom-weather.cloudyFoggyNight,
118#custom-weather.default
119#custom-weather.rainyDay,
120#custom-weather.rainyNight,
121#custom-weather.severe,
122#custom-weather.showyIcyDay,
123#custom-weather.snowyIcyNight,
124#custom-weather.sunnyDay {
125 padding-top: 4px;
126 padding-bottom: 4px;
127 padding-right: 6px;
128 padding-left: 6px;
129}
130
131#temperature.critical {
132 background-color: #ff0000;
133}
134
135@keyframes blink {
136 to {
137 color: #000000;
138 }
139}
140
141/*-----Indicators----*/
142#custom-hypridle.notactive,
143#idle_inhibitor.activated {
144 color: #39FF14;
145}
146
147#taskbar button:hover {
148 padding-left: 3px;
149 padding-right: 3px;
150 animation: gradient_f 20s ease-in infinite;
151 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
152}
153
154#taskbar button.active {
155 background-color: #7f849c;
156 padding-left: 12px;
157 padding-right: 12px;
158 animation: gradient_f 20s ease-in infinite;
159 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
160}
161
162#battery.critical:not(.charging) {
163 color: #f53c3c;
164 animation-name: blink;
165 animation-duration: 3.0s;
166 animation-timing-function: steps(12);
167 animation-iteration-count: infinite;
168 animation-direction: alternate;
169}
170
171#backlight-slider slider,
172#pulseaudio-slider slider {
173 min-width: 0px;
174 min-height: 0px;
175 opacity: 0;
176 background-image: none;
177 border: none;
178 box-shadow: none;
179}
180
181#backlight-slider trough,
182#pulseaudio-slider trough {
183 min-width: 80px;
184 min-height: 10px;
185 border-radius: 5px;
186 background-color: black;
187}
188
189#backlight-slider highlight,
190#pulseaudio-slider highlight {
191 min-height: 10px;
192 border-radius: 5px;
193 background-color: wheat;
194}
195
196